import React from 'react'
// ===================================================================== Temp
import Controls from '#cpt/temp/Controls'
// ===================================================================== global declare
const { $Lazy, $http, $fn } = window
// ===================================================================== Lazy
const Button	= $Lazy.load(()=>import('@antd/button'))
const Page		= $Lazy.load(()=>import('#tp/page/page-container-scroll'))
const message = $Lazy.file(()=>import('@antd/message'))
// ===================================================================== data
const level = [
	{ name: '普通', value: 1 },
	{ name: '重要', value: 2 },
	{ name: '紧急', value: 3 },
	{ name: '重要且紧急', value: 4 }
]
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:{ }
	}
	
	componentDidMount(){
		const { uuid, user_id, index } = $fn.query()
		this.param = { uuid, user_id }
		this.index = +index
		
		const info = [ 'msg-system/info', 'msg-notice/info' ]
		
		// 显示数据
		this.fetch(info[+index], this.index)
	}
	// 上一条、下一条
	onPage = dir => {
		const prev = [ 'msg-system/last', 'msg-notice/last' ]
		const next = [ 'msg-system/next', 'msg-notice/next' ]
		
		const api = dir === 0 ? prev[this.index] : next[this.index]
		
		this.fetch(api, dir)
	}
	
	// 回执
	receipt = ()=> {
		const { uuid, user_id } = $fn.query()
		$http.submit(this, 'msg-system/receipt', { param:{uuid, user_id } }).then(()=>{
			const { data } = this.state
			this.setState({ data: {...data} })
			message.then(f => f.success('操作成功'),1)
		})
	}
	
	fetch = (api, dir) => {
		$http.submit(this, api, { param:this.param, isPull:true }).then(data=>{
			this.setState({ data })
			// 标记已读
			const isview = [ 'msg-system/isview', 'msg-notice/isview' ]
			const { user_id, msg_system_id, msg_notice_id, id, is_view } = data
			
			const uuid = this.index === 0 ? msg_system_id : msg_notice_id
			
			this.param = { user_id, id }
			
			if(+is_view !== 1){
				$http.submit(null, isview[this.index], { param:{uuid, user_id}, loading:false })
			}
		})
	}
	
	// 操作按钮
	controls = () =>  [
		Controls.back.call(this,{ refresh:true })
	]
	
	render(){
		const { data } = this.state
		const { index } = $fn.query()
		return (
			<>
				<Page title='系统公告 / 消息详情' controls={this.controls()} className='p10' 
					header = {
						<div className='plr10'>
							<h3 className='f16 tc b lh30 ptb10'>{$fn.val(data?.title)}</h3>
							<ul className='tc bbor1 pb10 g3 fxc'>
								<li className='mr20'><span className='g9 mr5'>作者:</span>{$fn.val(data?.created_uname)}</li>
								<li className='mr20'><span className='g9 mr5'>部门:</span>{$fn.val(data?.depart_name)}</li>
								<li className='mr20'><span className='g9 mr5'>等级:</span>【{$fn.getState(level,data?.level)}】</li>
								<li><span className='g9 mr5'>发布时间:</span>{$fn.val(data?.publish_at)}</li>
							</ul>
						</div>
					}
					footer = {
						<div className='tbor1 p10 mlr10 fxmc'>
							{ (!data?.receipt_at && [3, 4].includes(+data?.level)) ? <Button label='回执' size='large' style={{ minWidth:120, display: +index === 0 ? 'block' : 'none' }} onClick={this.receipt.bind(this)} className='mr20' /> : '' }
							<Button label='上一条' ghost size='large' style={{minWidth:120}} onClick={this.onPage.bind(this,0)} />
							<Button label='下一条' ghost size='large' style={{minWidth:120}} onClick={this.onPage.bind(this,1)} className='ml20' />
						</div>
					}
					
				>
					<article className='f14 lh24 mt10 plr10 tj ti' dangerouslySetInnerHTML={{__html:$fn.val(data?.content)}}></article>
				</Page>
			</>
		)
	}
}

export default Index